<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen p-4">
    <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
        <div class="bg-blue-500 text-white p-6">
            <h2 class="text-2xl font-bold">
                <i class="fa fa-list-alt mr-2"></i>学生成绩列表
            </h2>
        </div>
        <div class="p-6">
            <div class="mb-4">
                <a href="/" class="inline-block bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md transition duration-200">
                    <i class="fa fa-arrow-left mr-2"></i>返回录入页
                </a>
            </div>
            
            {% if students %}
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white">
                    <thead>
                        <tr class="bg-gray-100 text-gray-700">
                            <th class="py-3 px-4 text-left">ID</th>
                            <th class="py-3 px-4 text-left">学生姓名</th>
                            <th class="py-3 px-4 text-left">成绩</th>
                            <th class="py-3 px-4 text-left">录入时间</th>
                            <th class="py-3 px-4 text-left">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for student in students %}
                        <tr class="border-b border-gray-200">
                            <td class="py-3 px-4">{{ student.id }}</td>
                            <td class="py-3 px-4">{{ student.name }}</td>
                            <td class="py-3 px-4">{{ student.score }}</td>
                            <td class="py-3 px-4">{{ student.created_at }}</td>
                            <td class="py-3 px-4">
                                <a href="/delete/{{ student.id }}" class="text-red-500 hover:text-red-700" 
                                   onclick="return confirm('确定要删除这条记录吗？')">
                                    <i class="fa fa-trash mr-1"></i>删除
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded text-center">
                <i class="fa fa-info-circle mr-2"></i>暂无学生成绩数据
            </div>
            {% endif %}
        </div>
    </div>
</body>
</html>
